<template>
  <div class="header">
    <div class="logo">
      <div class="logo-img">
        <el-image class="imgi" :crossorigin="null" :src="logoUrl" fit="contain" />
      </div>

    </div>
    <div class="top-wrapper">
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        background-color="none"
        text-color="black"
        router
        active-text-color="none"
      >
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item index="/service">商户服务</el-menu-item>
        <el-menu-item index="/news">新闻动态</el-menu-item>
        <el-menu-item index="/onlineOrder">在线下单</el-menu-item>
        <el-menu-item index="/about">关于我们</el-menu-item>
      </el-menu>
    </div>
    <div class="loginFlag">
      <div class="profileWrap">
        <ProfileCard :avatarUrl="avatarUrl"  @logout="handleLogout"></ProfileCard>
      </div>

    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import { useAuthStore } from "@/store/userInfo";
import { logoUrl } from "@/common/common";
import ProfileCard from '@/components/ProfileCard.vue';
const authStore = useAuthStore();
const router = useRouter();
const avatarUrl = ref<string>("https://cityexpress.yellowswimming.cn/img/unAuth.png");
onMounted(() => {
  if (authStore.username !== "") {
   
    avatarUrl.value = authStore.avatarUrl;
   
  }
});
const handleLogout = () => {
  // 用户登出后，重置头像为默认头像
  avatarUrl.value = "https://cityexpress.yellowswimming.cn/img/unAuth.png";
};

</script>

<style scoped lang="less">
@font-face {
  font-family: "iconfont";
  src: url("//at.alicdn.com/t/c/font_4410292_0dg01jk7lvf.woff2?t=1705217275413")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_4410292_0dg01jk7lvf.woff?t=1705217275413")
      format("woff"),
    url("//at.alicdn.com/t/c/font_4410292_0dg01jk7lvf.ttf?t=1705217275413")
      format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.header {
  background-color:#ffffff ;
  display: flex;
  height: 6vh;
  justify-content: space-around;

  .logo {
    flex: 1;

    display: flex;
    justify-content: center;
    align-items: center;

    .logo-img {
      flex: 0.7;
      height: 100%; // Changed from 90% to 100%
      display: flex; // Added
      align-items: center; // Added
    

      .imgi {
        width: 6rem; // Increased from 5rem to 6rem
        height: 5rem; // Added explicit height
        object-fit: contain; // Changed from cover to contain
      }
    }

    .logo-content {
      flex: 3;
      height: 90%;

      display: flex;
      flex-direction: column;

      .top-font {
        flex: 2;
        margin-bottom: 0.4rem;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;

        span {
          font-size: 1rem;
          color: black;
          font-weight: 700;
        }
      }

      .bottom-font {
        flex: 1.4;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        span {
          font-size: 0.7rem;
          color: rgb(139, 132, 132);
        }
      }
    }
  }

  .top-wrapper {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  :deep(.el-menu-item) {
    font-size: 1rem !important;
  }

  .loginFlag {
    flex: 1;
    display: flex;
    align-items: center;
    .avatarWrap {
      width: 9%;
      height: 72%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .profileWrap {
       position:relative;
       width:80px;
       height: 100%;
       z-index: 100;
      //  top: 1.4vh;
    }

    .signIn-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 18%;
      height: 100%;
      margin-left: 20px;
      font-size: 1rem !important;
      display: flex;
      align-items: center;

      .container {
        display: flex;
        align-items: center;
        cursor: pointer;
      }
    }
  }

  .clickable-text:hover {
    color: rgb(157, 157, 222);
    font-weight: bold;
  }

  .el-menu-demo {
    height: 10vh;
  }

  .el-menu--horizontal > .el-menu-item {
    font-size: 1rem;
    color: var(--el-menu-text-color);
  }

  .el-menu--horizontal.el-menu {
    border-bottom: none;
    width: 80%;
    display: flex;
    /* 启用Flexbox布局 */
    justify-content: space-around;
    /* 使得<li>元素在容器中均匀分布，两端对齐 */
  }

  .el-menu--horizontal > .el-menu-item.is-active {
    color: rgb(214, 68, 68) !important;
    border-bottom: rgb(218, 58, 87) 4px solid !important;
  }

  .el-menu {
    --el-menu-hover-bg-color: none !important;
  }
}
</style>
